@import "../../../Common/Common";

.messageDealtCss {
  // @extend .gMain;
  // font-size: .374rem;

  .item {
    padding: 5px 10px;
    margin-top: 10px;
  }

  .list {
    padding: 5px;

    .row {
      .yearAndMonth {
        font-size: .48rem;
        padding-left: .267rem;
        color: #A0A0A0;
      }

      .bom {
        position: relative;

        .bData {
          display: flex;
          position: relative;

          .left {
            text-align: center;
            padding: 0 .1rem;
            white-space: nowrap;
            width: 1.3rem;

            .space {
              height: 20%;
              min-height: .5rem;
              width: 100%;
            }

            .day {
              color: #13A7FF;
              font-size: .53rem;
            }

            .week {
              font-size: 14px;
            }
          }

          .center {
            position: relative;
            width: .05rem;
            padding-left: .1rem;

            .c1 {
              width: 2px;
              height: .8rem;
              position: relative;
            }

            .c3 {
              position: relative;
              width: 2px;
              height: 70%;
              position: relative;
              margin-left: 5px;
            }

            .c2 {
              position: relative;
              @extend .gWebkitBoxCenter;
              height: .33rem;
              z-index: 15;

              > div {
                background: #13A7FF;
                height: .32rem;
                width: .32rem;
                border-radius: 50%;
                margin-left: -0.16rem;
              }

              &::after {
                content: "";
                position: absolute;
                // right: -15px;
                // bottom: 1px;
                // border-width: 7px;
                border-style: solid;
                border-color: transparent #FFFFFF transparent transparent;

                right: -0.7rem;
                bottom: -0.2rem;
                border-width: .4rem;
              }

            }

          }

          .splitLine {
            position: relative;
            width: .02rem;
            display: flex;
            margin-right: -0.02rem;

            .line {
              width: .05rem;
              position: absolute;
              background: #E6E6E6;
              margin-top: 1.11rem;
              height: 100%;
              z-index: 10;
              right: .01rem;
            }
          }

          .right {
            flex: 1;
            margin-left: .23rem;
            padding: 10px 10px 10px 15px;
            position: relative;
            overflow: hidden;

            .data {
              position: relative;
              background: #fff;
              border-radius: 5px;
              padding: 10px;

              .top {
                color: #222;
                position: relative;
                font-size: .4267rem;
                margin-bottom: .3rem;
                word-break: break-all;
                display: -webkit-box;
                text-overflow: ellipsis;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
              }

              .bottom {
                margin-top: 5px;
                position: relative;
                display: flex;
                align-items: center;

                .nowrap {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }

                .icon {
                  padding: 5px;
                  @extend .nowrap;
                }

                .peopleList {
                  flex: 1;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  @extend .nowrap;
                }

                .more {
                  padding: 5px;
                }
              }
            }

          }

        }

        .operator {
          width: 100%;
          position: absolute;
          bottom: 25px;

          .bg {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 100;
            background: rgba(0, 0, 0, 0.1);
          }

          &.show {
            display: flex;

            .gc {
              padding: .267rem;
            }
          }

          .gc {
            position: absolute;
            white-space: nowrap;
            padding: .267rem;
            z-index: 102;
            border-radius: 5px;
            font-size: .38rem;
            text-align: center;
            background-image: url('../img/icon-tooltip.png');
            background-size: contain;
            background-repeat: no-repeat;
            right: .37rem;

            > div {
              padding: .13rem .27rem;
            }

            .gx {
              border-bottom: 1px solid #e6e6ee;
              // padding: 10px 5px;
            }

            .complete {}
          }
        }
      }

      > div:last-child {
        .bData {
          .splitLine {
            display: none;
          }
        }
      }
    }

  }

  .last {
    text-align: center;
    margin-bottom: 10px;
  }

  .btnKeep {
    position: fixed;
    width: 100vw;
    bottom: 20px;
    display: flex;
    flex-direction: row-reverse;

    > div {
      margin-right: 20px;
      padding: 5px 20px;
      background: #13a7ff;
      font-size: .4rem;
      color: #fff;
      border-radius: 30px;

      &:hover {
        background: #1995e5;

      }
    }
  }

  .btnFocus {
    position: fixed;
    top: -100px;
  }
}
